<script setup lang="ts">
import {
  onMounted,
  ref,
  reactive,
  watch,
  computed,
  toRaw,
  nextTick,
} from "vue";
import bus from "../tools/bus";
import Cornerstone from "../tools/cornerStone";
import type * as VideoType from '../type';
import _ from 'lodash';

import {
  VideoStatus,
  VideoPlayOrStop,
  VideoBackwardOrForward,
} from "../tools/emun";
import {
  usePageType
} from '../tools/usePageType';
import { useVideo } from "@/store";

const { isView, isEdit } = usePageType();
const videoStore = useVideo();
let tempImageIdsLen = 0;

function throttled(func: Function, wait: number = 100) {
  let timeout: any;
  return (e: any) => {
    if (timeout) {
      e?.preventDefault();
      return true;
    }
    timeout = setTimeout(() => {
      func.call(null, e);
      clearTimeout(timeout);
      timeout = null;
    }, wait);
  };
}
const tools = reactive([
  { name: '调窗', toolName: 'Wwwc', },
  { name: '矩形', toolName: 'RectangleRoi', },
  { name: '闭合画笔', toolName: 'FreehandRoi', },
]);

const props = defineProps({
  imageList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  seriesUid: {
    type: String,
    default: "",
  },
  seriesId: {
    type: String,
    default: "",
  },
  currentSeriesUid: {
    type: String,
    default: "",
  },
  currentNidus: {
    type: Object,
    default: ()=> {
      return {
        id: null,
        child: []
      }
    }
  },
  videoItem: {
    type: Object,
    default: ()=> {
      return {
        frameRate: 30
      }
    }
  },
  seriesNumber: {
    type: Number,
    default: 0,
  }
});

watch(()=> props.currentSeriesUid, ()=> {
  if( props.seriesUid === props.currentSeriesUid ){
    display.value = "block";
  } else {
    display.value = "none";
  }
  nextTick(()=> {
    //解决黑屏问题
    cornerstone.value && cornerstone.value.resize();
  })
})

const cornerstone: any = reactive({
  value: null,
});
const videoIndex: any = ref(-1);//层数
let timer: string | number | NodeJS.Timeout | undefined;
const display:any = ref(true);
const imageIds:any = ref([]);

/* 进度条 */
// const totalFPS = 20 * 60 * 5; //一秒20帧 总共5分钟
// const oneFPS: any = ref(0); //一帧的距离
const timeBarWidth: any = ref(0); //进度栏总宽度
const eleTimeInfo: any = ref(null); //拖拽的外层元素
const initPosition: any = ref(null); //拖拽元素相对于屏幕的初始位置
const offsetValue = 0; //偏差值
const pointerPosition = ref(offsetValue);

const timeInfoInitWidth: any = ref(null);
const timeInfoCurrentWidth = ref<any>(null);

const cellWidth: any = ref(1);

let addZero = (value: number) => value < 10 ? "0"+value : value;
let currnetPalyTime = computed(()=>{
  const seconds: any = videoIndex.value / props.videoItem?.frameRate;
  const m = Math.floor(seconds/60);
  const s = parseInt((seconds%60).toString());
  return `${addZero(m)}:${addZero(s)}`;
})

const videoTotalTime = computed(()=>{
  const seconds: any = imageIds.value.length / props.videoItem?.frameRate;
  const m = Math.floor(seconds/60);
  const s = parseInt((seconds%60).toString());
  return `${addZero(m)}:${addZero(s)}`;
})

const changePointerPosition = (value: any) : any => {
  isCurrentItem(()=>{
    let index = parseInt((value / cellWidth.value).toString());
    videoIndex.value = index;
    displayImageByIndex(index);
  }, false)
}

const cellWidthMin = ref(1);
function changeImageList( imageList: any ){
  if( imageList.length ){
    //元素总宽度/图片总数(总帧数)
    const index = Math.ceil(timeInfoInitWidth.value / (imageList.length - 1))  //     1000/500
    //少于1 (800/1600); 
    if( index <= 1 ){
      cellWidth.value = 1;      //一个间隔的宽度
      timeInfoCurrentWidth.value = imageList.length - 1;  //设置元素的总宽度为图片总数（总帧数）*1
      slide.value = 1;
      cellWidthMin.value = 1;
      slideMin.value = 1;
      slideDisabled.value = false;
    } else {
      if( index >= slideMax.value ){
        // index > 最大值49  （800/10） index = 80
        cellWidth.value = index;
        timeInfoCurrentWidth.value = (imageList.length - 1) * index;
        slide.value = slideMax.value;
        cellWidthMin.value = index;
        slideMin.value = slideMax.value;
        slideDisabled.value = true;
      } else {
        //大于1 (800/200); index = 4
        cellWidth.value = index;
        timeInfoCurrentWidth.value = (imageList.length - 1) * index;
        slide.value = index;
        cellWidthMin.value = index;
        slideMin.value = index;
        slideDisabled.value = false;
      }
    }
  } else {
    timeInfoCurrentWidth.value = timeInfoInitWidth.value;
  }
}

function changeStudy(){
  changeImageList(props.imageList)
  addToolStateToImg()
}
function addToolStateToImg(){
  isCurrentItem(()=>{//所有序列只执行一次
    cornerstone.value.clearToolState()
  }, false)
  cornerstone.value.addToolState(clone(props.currentNidus), isView)
}

const currnetToolName = ref("");
const tempImageIds = ref([])
const timeDom = ref()

onMounted(() => { 
  imageIds.value = props.imageList;
  tempImageIds.value = imageIds.value.slice(0, imageIds.value.length - 1);
  tempImageIdsLen = tempImageIds.value.length;
  eleTimeInfo.value = document.querySelector(`.time-info`);
  timeInfoInitWidth.value = eleTimeInfo.value.getBoundingClientRect().width;
  initCornerstone( toRaw(props.imageList) );
  nextTick(changeStudy);

  display.value = props.seriesUid == props.currentSeriesUid ? 'block' : 'none';

  bus.on("VideoLabel.labelToolsChange", labelToolsChange);
  bus.on("VideoLabel.wwwcToolsChange", wwwcToolsChange);
  bus.on("VideoLabel.setWL", setWL);
  bus.on("VideoLabel.changeVideoIndex", changeVideoIndex);
  bus.on("VideoLabel.changeStateColor", changeStateColor);
  bus.on("VideoLabel.setCurrentSelectedUuid", setCurrentSelectedUuid);
  bus.on("Video.addtoolstate", addToolStateToImg);
  bus.on("VideoLabel.removeNidus", (info:any)=>{
    removeNidus(info.thirdItem)
  });
  bus.on("VideoLabel.displayImageByIndex", ()=>{
    displayImageByIndex();
  })
  bus.on("VideoLabel.showNidus", (info:any)=>{
    hideNidus(info.thirdItem);
  });
  bus.on("VideoLabel.hideNidus", (info:any)=>{
    hideNidus(info.thirdItem);
  });
  bus.on("VideoLabel.addToolStateSingle", addToolStateSingle);
  bus.on("VideoLabel.clickVideoListItem", clickVideoListItem);
  bus.on("VideoLabel.toolDisabled", toggleToolDisabled)

  videoIndex.value = 0; //特意触发监听事件

  init();

  bus.on("VideoLabel.rightClickPress", ()=> isCurrentItem(rightClickPress, false));
  bus.on("VideoLabel.rightLongPress", ()=> isCurrentItem(rightLongPress, false));
  bus.on("VideoLabel.leftLongPress", ()=> isCurrentItem(leftLongPress, false));
  bus.on("VideoLabel.leftClickPress", ()=> isCurrentItem(leftClickPress,false));
  bus.on("VideoLabel.keyup", ()=> isCurrentItem(keyup,false));
  bus.on("VideoLabel.keyboardBlankDown", ()=> isCurrentItem(keyboardBlankDown, false));
});

//标注工具change
function labelToolsChange(changeData:any){
  isCurrentItem(()=>{
    const { toolName, active } = changeData;
    if(active){
      currnetToolName.value = toolName;
      cornerstone.value.setToolName(toolName);
      cornerstone.value.setToolActive(toolName);
    }else{
      currnetToolName.value = '';
      cornerstone.value.setToolName('');
      cornerstone.value.setToolPassive(toolName);
    }
  }, false)
}

//调窗工具change
function wwwcToolsChange(changeData:any){
  isCurrentItem(()=>{
    const { toolName, isSeleted } = changeData;
    cornerstone.value.setToolName(toolName);
    currnetToolName.value = toolName;
    if( isSeleted ){
      cornerstone.value.setToolActive(toolName);
    } else {
      cornerstone.value.setToolDisabled("Wwwc");
    }
  }, false)
}
function setWL({wl, ww}: any){
  cornerstone.value.setWL(wl, ww)
}

function clone(thirdItem: any){
  return _.cloneDeep(toRaw(thirdItem));
}

function changeStateColor(dataInfo:any){
  const { thirdItem, color } = dataInfo;
  isCurrentItem(()=>{
    cornerstone.value.setStateColor(clone(thirdItem), color);
  }, false);
}

function setCurrentSelectedUuid(uuid: any){
  isCurrentItem(()=>{
    cornerstone.value.setCurrentUuid(uuid);
  }, false);
}

function clickVideoListItem(){
  isPlay.value = false;
  stop();
  cornerstone.value.resize();
}

//删除病灶
const removeNidus = (thirdItem:VideoType.NidusThirdItem) => {
  isCurrentItem(()=>{
    cornerstone.value.displayImage(videoIndex.value, ()=> {
      cornerstone.value.removeToolState(clone(thirdItem));
    })
  })
}

function addToolStateSingle(array:any){
  const [thirdItem, toolName] = array;
  isCurrentItem(()=>{
    cornerstone.value.addToolStateSingle(clone(thirdItem), toolName);
  })
}
//隐藏
const hideNidus = (thirdItem:VideoType.NidusThirdItem) => {
  isCurrentItem(()=>{
    cornerstone.value.setToolVisible(clone(thirdItem));
  })
}
//添加病灶
const addNidus = (thirdItem:VideoType.NidusThirdItem) => {
  isCurrentItem(()=>{
    cornerstone.value.displayImage(videoIndex.value);
  })
}

function isCurrentItem(fn:Function=()=>{}, isDelay = true){
  if( (props?.videoItem as any)?.seriesUid === props.currentSeriesUid ){
    if( isDelay ){
      setTimeout(()=>{
        fn();
      })
    } else {
      fn();
    }
  }
}

const changeVideoIndex = (item:any)=> {
  isCurrentItem(()=>{
    videoIndex.value = item.changeVideoIndex;
  })
}

const initCornerstone = (imageBase64List:any) => {
  cornerstone.value = new Cornerstone({
    imageBase64List,
    tools,
    width: props.videoItem?.imageWidth,
    height: props.videoItem?.imageHeight,
    seriesUid: props.seriesUid,
    element: `#cornerstone-element-${props.seriesId}`,
    nidus: clone(props.currentNidus),
    isView,
    seriesNumber: props.seriesNumber,
  });
};

/**
 * 1、速度 videoRate (0.25 1, 1.5, 2)
 * const base = 1000 / props.videoItem.frameRate / videoRate;
 * 2、跳帧 changIndex  =  Math.ceil(100 / base)
 * 3、delay = Math.ceil(changIndex * base);
 * 
 */

// 轮播
const play = (index: number, isCycle:boolean, delay: number = 0 ) => {
  // console.log("index, delay, isCycle", index, delay, isCycle);
  if ( isCycle ) {
    timer = setInterval(displayImage, delay);
  } else {
    displayImage();
  }
  function displayImage() {
    let currnetIndex = videoIndex.value + index;
    if (currnetIndex < 0 ) {
      currnetIndex = imageIds.value.length - 1 + currnetIndex ;
    }
    if (currnetIndex > imageIds.value.length - 1) {
      currnetIndex = currnetIndex % (imageIds.value.length - 1);
    }
    videoIndex.value = currnetIndex;
  }
};

/**
 * 
 * @param videoRate 倍率
 * @param isForWard 是否正向播放
 * @param isCycle 是否循环
 */
function playSwapForward( videoRate:number, isForWard: boolean = true,  isCycle:boolean = true ){
  // base为一帧多少秒
  const base = 1000 / props.videoItem.frameRate / videoRate;
  let index;
  let delay;
  if (videoRate >= 1) {
    index = Math.ceil(100 / base);
    delay = 100;
  } else {
    index = 1;
    delay = base;
  }
  if( isForWard ){
    // play(index, isCycle, delay);
    play(index, isCycle, delay);
  } else {
    // play(-index, isCycle, delay);
    play(-index, isCycle, delay);
  }
}

const displayImageByIndex = (index?: number) => {
  cornerstone.value.setScrollToIndex(index);
  // cornerstone.value.displayImage( typeof index  === 'number' ? index : videoIndex.value );
};

// 暂停轮播
const stop = () => {
  if (timer) clearInterval(timer);
};

const init = () => {
  const eleTimeBar = document.querySelector(".time-bar .time");
  const rect: any = eleTimeBar?.getBoundingClientRect();
  initPosition.value = rect.x;
  timeBarWidth.value = rect?.width;
  
};

watch(videoIndex, ()=> {
  isCurrentItem(()=>{
    displayImageByIndex(videoIndex.value);
    bus.emit("Video.changeVideoIndex", videoIndex.value)
    const value = Math.max(cellWidthMin.value, slide.value);
    pointerPosition.value = value * (videoIndex.value ) + offsetValue;
    //保持帧标在可视范围
    if(!isPlay.value) return//只针对播放时
    const pos = pointerPosition.value - timeDom.value.clientWidth;
    const val = value * 4
    const rat = Math.ceil(pos / val)
    timeDom.value.scrollTo({left: rat * value * 4, top: 0, behavior: 'auto'})
  }, false)
});

function toggleToolDisabled(statusText:any){
  isCurrentItem(()=>{
    if( currnetToolName.value === "Wwwc" ){
      cornerstone.value.setToolActive(currnetToolName.value);
    } else {
      cornerstone.value.toggleToolDisabled(statusText);
    }
  }, false)
}

watch(()=> cellWidth.value, ()=>{
  bus.emit("Video.slideChange", [cellWidth.value, props.seriesUid]);
})

/*** 视频状态  ***/
const videoRate = ref(1);
const rateOptions = reactive([
  { rate: 0.25, isActive: false },
  { rate: 0.75, isActive: false },
  { rate: 1, isActive: true },
  { rate: 1.5, isActive: false },
  { rate: 2, isActive: false },
]);
// 播放/暂停
const isPlay = ref(false);
const clickVideoPlayOrStop = (isPlayValue: boolean) => {
  isPlay.value = isPlayValue;
  videoBackwardOrForward.value = "";
  stop();
  if (isPlay.value) {
    playSwapForward(videoRate.value);
  }
};

// 快进/快退
const videoBackwardOrForward = ref("");
const clickVideoBackwardOrForward = (status: string) => {
  isPlay.value = true;
  videoBackwardOrForward.value = status;
  stop();
  if (VideoBackwardOrForward.forward === status) {
    //快进 2倍
    playSwapForward(2);
  }
  if (VideoBackwardOrForward.backward === status) {
    //快退 0.75倍
    playSwapForward(0.75, false);
  }
};
// 速率
const clickVideoRate = (item: any, index: number) => {
  videoRate.value = item.rate;
  rateOptions.forEach((item) => (item.isActive = false));
  rateOptions[index].isActive = true;
  if (isPlay.value && !videoBackwardOrForward.value ) {
    stop();
    playSwapForward(videoRate.value);
  }
};

/*** 监听键盘事件 ***/
// 视频上一个状态信息，按住键盘右键或左键需记录视频之前的视频状态，等松开键盘时视频恢复到之前的状态
const isLongPress = ref(false);
const videoPrevInfo = reactive({
  isPlay: false,
  status: "",
  videoRate: 1,
});
const setVideoPrevInfo = () => {
  videoPrevInfo.isPlay = isPlay.value;
  videoPrevInfo.status = videoBackwardOrForward.value;
  videoPrevInfo.videoRate = videoRate.value;
};
const Keyboard = {
  ArrowLeft: "ArrowLeft",
  ArrowRight: "ArrowRight",
  blank: " ", // 空格键
};

//右键点按
function rightClickPress(){
  setVideoPrevInfo();
  isLongPress.value = false;
  stop();
  // playSwapForward(videoRate.value, true, false);
  play(1, false);
}
//右键长按
function rightLongPress(){
  setVideoPrevInfo();
  isLongPress.value = true;
  stop();
  playSwapForward(1.5);
}
//左键长按
function leftLongPress(){
  setVideoPrevInfo();
  isLongPress.value = true;
  stop();
  playSwapForward(1.5, false)
}
//左键点按
function leftClickPress(){
  setVideoPrevInfo();
  isLongPress.value = false;
  stop();
  play(-1, false);
}

function mouseup(e:any){
  if( isPlay.value ){
    stop();
    playSwapForward(videoRate.value)
  } else {
    stop();
  }
}

// 按下空格键
const keyboardBlankDown = () => {
  clickVideoPlayOrStop(!isPlay.value);
};

//键盘抬起
const keyup = () => {
  clickVideoBackwardOrForward("");
  if( videoPrevInfo.isPlay ){
    playSwapForward(videoRate.value);
  } else {
    clickVideoPlayOrStop(false);
  }
};

const slide = ref(1);
const slideMin = ref(1);
const slideMax = ref(49);
const slideDisabled = ref(false);

const changeSlide = (slideValue: any):any => {
  isCurrentItem(()=>{
    const value = Math.max(cellWidthMin.value, slideValue);
    cellWidth.value = value;
    timeInfoCurrentWidth.value = value * (imageIds.value.length - 1);
    pointerPosition.value = value * ( videoIndex.value ) + offsetValue;
  }, false )
};

/* 点击计时器计时器图标，取开始帧、结束帧  */
const isStart = ref(true);
const handleClickTimer = ()=> {
  if( isView || !videoStore.isMulti ) return;
  isCurrentItem(()=>{
    const _isStart = isStartIndex();
    bus.emit("Video.handleClickTimer", {
      videoIndex: videoIndex.value,
      isStart: _isStart,
      cellWidth: cellWidth.value,
    })
    isStart.value = _isStart;
  }, false)
}

function isStartIndex(){
  const { child } = props.currentNidus;
  if( child.length == 0 ) return true;
  const lastItem = child[child.length-1];
  return !(lastItem.endIndex === null);
}


// 判断当前帧是否在标注的区间
function getCurrentVideoIndexInTimer() {
  let value: boolean = false;
  props.currentNidus.child.forEach((item: any, index:number) => {
    if (value) return;
    const { startIndex, endIndex } = item;
    if (
      startIndex &&
      endIndex &&
      videoIndex.value &&
      videoIndex.value + 1 >= startIndex &&
      videoIndex.value + 1 <= endIndex
    ) {
      value = true;
    }
  });
  return value;
}

const change = (item:any, values:any) => {
  if( isView ) return;
  const _startValue = Math.min(...values);
  const _endValue = Math.max(...values);  
  const startIndex = Math.ceil(_startValue/cellWidth.value) + 1;
  const endIndex = Math.ceil(_endValue/cellWidth.value) + 1;
  bus.emit("Video.NidusIndexChange", {
    id: item.id,
    startIndex,
    endIndex,
    cellWidth: cellWidth.value,
  })
}

window.onresize = () => {
  cornerstone.value && cornerstone.value.resize();
}

</script>

<template>
  <keep-alive>

  <div class="video" :style="{display:display}" :id="`video-${props.seriesUid}`" tabIndex="-1" >
    <div class="video-content">
      <div class="cornerstone-element" :id="`cornerstone-element-${props.seriesId}`"></div>
      <div class="cornerInfo">
        <div class="corner1"></div>
        <div class="corner2"></div>
        <div class="corner3"></div>
        <div class="corner4">{{videoIndex +1}}/{{imageIds.length}}</div>
      </div>
    </div>
    <div class="video-control">
      <!-- 播放速度 -->
      <div class="play-speed">
        <div class="speed">
          <span
            :class="
              VideoBackwardOrForward.backward === videoBackwardOrForward
                ? 'icon-container active'
                : 'icon-container'
            "
            title="快退"
            @mousedown="leftLongPress"
            @mouseup="mouseup"
            
          >
            <i class="iconfont icon-zuiqian"></i>
          </span>
          <span
            class="icon-container"
            @click="clickVideoPlayOrStop(true)"
            v-show="!isPlay"
            title="播放"
          >
            <i class="iconfont icon-bofang"></i>
          </span>
          <span
            class="icon-container"
            @click="clickVideoPlayOrStop(false)"
            v-show="isPlay"
            title="暂停"
          >
            <i class="iconfont icon-zanting"></i>
          </span>
          <span
            :class="
              VideoBackwardOrForward.forward === videoBackwardOrForward
                ? 'icon-container active'
                : 'icon-container'
            "
            title="快进"
            @mousedown="rightLongPress"
            @mouseup="mouseup"
          >
            <i class="iconfont icon-zuihou"></i>
          </span>
          <span class="seg"></span>
          <span class="multiple-text">播放倍数: </span>

          <span
            :class="
              item.rate === videoRate
                ? 'multiple-number active'
                : 'multiple-number'
            "
            v-for="(item, index) in rateOptions"
            :key="item.rate"
            @click="clickVideoRate(item, index)"
          >
            {{ item.rate }}x
          </span>
        </div>
        <div
          :data-slideMin="slideMin"
          :data-slideMax="slideMax"
          :data-slide="slide"
         :class="slideDisabled ? 'speed-number disabled' : 'speed-number' ">
          <i class="iconfont icon-xiaozhenshu"></i>
          <a-slider 
            class="speed-slide" 
            @change="changeSlide" 
            :tooltipVisible="slideDisabled ? false : undefined" 
            :disabled="slideDisabled" 
            v-model="slide" 
            :min="slideMin" 
            :max="slideMax" 
            style="width:100px"
            :step="1"
          />
          <i class="iconfont icon-dazhenshu"></i>
        </div>
        
      </div>
      <!-- 时间进度条 -->
      <div class="time-bar">
        <div class="line"></div>
        <div class="start-time">00:00</div>
        <div class="video-play-time-container">
          <span class="">{{ currnetPalyTime}}</span>/<span class="">{{ videoTotalTime }}</span>
        </div>
        <div class="time-icon" @click=" handleClickTimer" :title=" isStartIndex() ? '开始帧' : '结束帧' " >
          <i class="iconfont icon-zhenshu"></i>
        </div>

        <div :class="`time-info time-info-${props.seriesUid}`" ref="timeDom" :id="`time-${props.seriesUid}`">
            <div
              class="pointer"
              :style="{ width: timeInfoCurrentWidth + 'px' }"
              :data-pointerPosition="pointerPosition"
            >
              <a-slider 
                @change="changePointerPosition" 
                :show-tooltip="false"
                v-model="pointerPosition" 
                :min="0" 
                :max="cellWidth * (imageIds.length - 1)" 
                :step="cellWidth"
              />
            </div>
            
            <div class="time" :style="{ width: timeInfoCurrentWidth - 2 + 'px' }">
              <div
                :class=" index === tempImageIdsLen - 1 ? 'last-item item' : 'item'"
                v-for="(item, index) in tempImageIdsLen"
                :key="item"
                :style="{ width: `${cellWidth}px` }"
              >
                <span class="underscore"></span>
                <span
                  class="underscore last-underscore"
                  v-if="index === imageIds.length - 2"
                ></span>
              </div>
            </div>
            <div>
              <div
                class="frame-record"
                :style="{ width: timeInfoCurrentWidth + 'px' }"
              >
                <div
                  :class="subItem.isActive ? 'item item-select' : 'item' "
                  v-for="(subItem, subIndex) in props.currentNidus.child"
                  :key="subIndex"
                  :style="{ width: timeInfoCurrentWidth + 'px' }"
                >
                  <div 
                    :class=" subItem.slideValues[0] !== undefined && subItem.slideValues[1] !== undefined ? 'slider-container slide-show' : 'slider-container slide-hide' " 
                    :data-aa="`${subItem.slideValues[0]} - ${subItem.slideValues[1]}  `" 
                    :data-aaa="`${subItem.slideValues.toString()}`" 
                    :data-bb="subItem.startIndex"
                    :data-ccc="subItem.endIndex"
                    :data-ddd="cellWidth"
                    :data-max="cellWidth * (imageIds.length - 1) > 0 ? cellWidth * (imageIds.length - 1) : 0 "  
                    :style="{width: timeInfoCurrentWidth +'px'}"
                    v-if="typeof subItem.startIndex === 'number' " 
                  >
                    <el-slider
                      v-model="subItem.slideValues"
                      range
                      show-stops
                      @change="change(subItem, $event)"
                      :disabled="isView"
                      :min="-1"
                      :max="cellWidth * (imageIds.length - 1)"
                      :step="cellWidth"
                      :show-tooltip="false"
                    />
                  </div>
                  <div 
                    :data-a="cellWidth"
                    :data-index="subItem.labelIndex - 1"
                    class="icon-frame label-frame"
                    v-for="(thirdItem,thirdIndex) in subItem.child || []"
                    :key="`${subIndex}_${thirdIndex}`"
                    :style="{left: cellWidth * (thirdItem.labelIndex - 1) + 'px' }"
                  ></div>
                </div>
                <!-- 单帧的数据显示 -->
                <div
                    v-for="(thirdItem, thirdIndex) in videoStore.currentSingleList || []"
                    :data-a="cellWidth"
                    :data-index="thirdItem.labelIndex - 1"
                    class="icon-frame single-frame"
                    :key="`${props.seriesId}_${thirdIndex}`"
                    :style="{left: cellWidth * (thirdItem.labelIndex - 1) + 'px' }"
                ></div>
              </div>
            </div>
            
          </div>
      </div>
    </div>
  </div>
</keep-alive>
</template>


<style lang="less">
.video {
  width: 100%;
  height: 100%;
  flex: 1;
  outline: none;
  .video-content {
    width: 100%;
    height: calc(100% - 103px);
    background-color: #000;
    position: relative;
    .cornerstone-element {
      width: 100%;
      height: 100%;
    }
    .cornerInfo{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
      background-color: rgba(0,0,0,0);
      .corner1{
        position: absolute;
        left: 0;
        top: 0;
      }
      .corner2{
        position: absolute;
        right: 0;
        top: 0;
      }
      .corner3{
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .corner4{
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
  .video-control {
    width: 100%;
    height: 103px;

    .play-speed {
      width: 100%;
      height: 35px;
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      align-items: center;
      background: #182a36;
      border-bottom: 1px solid #000;
      .speed {
        height: 100%;
        display: flex;
        align-items: center;
        span {
          color: #fff;
        }
        span.icon-container {
          padding: 0 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .iconfont {
            color: #fff;
            font-size: 24px;
          }
          &.active,
          &:hover {
            .iconfont {
              color: #67c9d5;
            }
          }
        }
        span.seg {
          display: block;
          width: 1px;
          height: 28px;
          background-color: #000;
          margin: 0 12px;
        }
        span.multiple-text {
          margin-right: 6px;
        }
        span.multiple-number {
          width: 39px;
          height: 20px;
          line-height: 20px;
          background-color: #3f4d57;
          border-radius: 1px;
          margin-right: 4px;
          cursor: pointer;
          box-sizing: border-box;
          text-align: center;
          font-size: 12px;
          &.active {
            border: 1px solid #3fd4cf;
            height: 22px;
            background: #375357;
            color: #67c9d5;
          }
          &:hover {
            color: #67c9d5;
          }
        }
      }
      .speed-number {
        display: flex;
        align-items: center;
        .iconfont {
          color: #fff;
        }
        .icon-xiaozhenshu {
          font-size: 20px;
        }
        .icon-dazhenshu {
          font-size: 28px;
        }
        .arco-slider {
          margin: 0 8px;
        }
        .arco-slider-track{
          background-color: #f5f5f5;
        }
        &.disabled{
          .iconfont{
            color: #3D464B;
          }
          .arco-slider-btn,
          .arco-slider-rail{
            background-color: #3D464B !important;

          }
        }
      }
      .speed-slide{
        width: 92px;
        margin-top: 16px;
        .arco-slider-rail{
          width: 100%;
          height: 2px;
          border: none;
        }
        .arco-slider-bar{
          background-color: #D9D9D9;
        }
        .arco-slider-btn{
          width: 11px;
          height: 11px;
          background-color: #D9D9D9;
          margin-top: -5px;
          border: none;
          border-radius: 50%;
          &:hover{
            background-color: #67C9D5;
          }
          &::after{
            border: none;
          }
        }
        .arco-slider-track{
          height: 2px;
        }
      }
    }
    .time-bar {
      width: 100%;
      background-color: #182a36;
      display: flex;
      padding: 0 20px 0 15px;
      border-bottom: 1px solid #000;
      position: relative;
      .line{
        width: 100%;
        height: 1px;
        background-color: #000;
        position: absolute;
        left: 0;
        bottom: 11px;
        z-index: 2;
      }
      .start-time{
        position: absolute;
        left: 38px;
        top: 8px;
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
        color: #7188A8;
      }
      .video-play-time-container{
        position: absolute;
        right: 0;
        top: 6px;
        font-size: 12px;
        line-height: 12px;
        color: #7188A8;
        span{
          font-weight: 400;
          font-size: 12px;
          line-height: 12px;
          color: #7188A8;
        }
      }
      .time-icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        margin-top: 20px;
        cursor: pointer;
        .iconfont {
          color: #fff;
          font-size: 24px;
        }
        &:hover {
          .iconfont {
            color: #67c9d5;
          }
        }
      }
      
      .time-info {
        width: calc(100vw - 910px);
        overflow-x: scroll;
        padding-bottom: 14px;
        flex: 1;
        position: relative;
        .pointer {
          width: 8px;
          width: 100%;
          height: 15px;
          position: absolute;
          left: 0;
          top: 6px;
          z-index: 3;
          background-color: transparent;
          .arco-slider-track::before{
            background-color: transparent;
          }
          .arco-slider-bar{
            background-color: transparent;
          }
          .arco-slider-btn{
            border: none;
            width: 8px;
            height: 46px;
            background-image: url("../icons/pointer.png");
            background-repeat: no-repeat;
            background-size: 8px 46px;
            cursor: pointer;
            border-radius: 0;
            background-color: transparent;
            box-shadow: none;
            margin-top: 0;
            &::after{
              display: none;
            }
          }
        }
        // 滚动条整体
        &::-webkit-scrollbar {
          z-index: 50;
          width: 78px;
          height: 6px;
        }

        // 滚动条滑道
        &::-webkit-scrollbar-track {
          background-color: rgba(0, 0, 0, 0);
        }

        // 滚动滑块样式
        &::-webkit-scrollbar-thumb {
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          transition: all 0.2s;
          width: 78px;
          height: 6px;
          left: 0;
          top: 3px;
          background: #414e60;
          border-radius: 100px;
          cursor: pointer;
        }

        // 滚动条的样式，是可以跟 :hover 伪类叠加使用的
        // 滚动条鼠标悬浮时的样式
        &:hover::-webkit-scrollbar-thumb {
          transition: all 0.2s;
        }
        // 滚动条上下的箭头按钮
        &::-webkit-scrollbar-button {
          display: none;
        }
        &::-webkit-scrollbar-corner {
          display: none;
        }
        .time {
          width: 100%;
          height: 25px;
          border-bottom: 1px solid #7188a8;
          display: flex;
          align-items: end;
          margin-bottom: 6px;
          .item {
            // height: 17px;
            position: relative;
            .underscore {
              display: block;
              width: 1px;
              height: 3px;
              background-color: #7188a8;
            }
            .time-text {
              font-size: 12px;
              color: #7188a8;
              position: absolute;
              right: -10px;
              bottom: 4px;
              z-index: 2;
            }
            &.active {
              .underscore {
                height: 6px;
              }
            }
            &.last-item {
              .last-underscore {
                position: absolute;
                right: 1px;
                bottom: -1px;
                z-index: 2;
              }
              .last-underscore {
                height: 6px;
              }
            }
          }
        }
        .frame-record {
          width: 100%;
          height: 16px;
          background-color: #414e60;
          position: relative;
          .item {
            display: flex;
            align-items: center;
            height: 0;
            position: absolute;
            left: 0;
            
            .slider-container {
              position: absolute;
              width: 8px;
              height: 8px;
              background-size: cover;
              background-repeat: no-repeat;
              margin-top: -20px;
              margin-left: -4px;
              &.start-frame {
                background-image: url("../icons/icon-startIndex.png");
              }
              &.end-frame {
                background-image: url("../icons/icon-endIndex.png");
              }
              
            }
            .label-frame {
                position: absolute;
                width: 8px;
                height: 8px;
                background-size: cover;
                background-repeat: no-repeat;
                margin-top: 16px;
                margin-left: -4px;
                background-image: url("../icons/icon-labelIndex.png");
            }
            &.item-select{
              .slider-container{
                .el-slider{
                  .el-slider__bar{
                    height: 16px;
                    background-color: #3A7486 !important;
                    pointer-events: none;
                  }
                }
                
              }
            }
            .slider-container{
              margin-top: -10px;
              height: 0;
              &.slide-show{
                .el-slider__button-wrapper:nth-child(3),
                .el-slider__button-wrapper{
                  display: block;
                }
              }
              &.slide-hide{
                .el-slider__button-wrapper{
                  display: block;
                }
                .el-slider__button-wrapper:nth-child(3){
                  display: none;
                }
              }
              .el-slider{
                .el-slider__bar,
                .el-slider__runway{
                  height: 0;
                }
                
                .el-slider__bar{
                  height: 16px;
                  top: -11px;
                  background-color: #3A7486;
                }
                .el-slider__bar,
                .el-slider__runway,
                .el-slider__stop{
                  background-color: transparent;
                }
                .el-slider-track{
                  background-color: transparent !important;
                  &::before{
                    background-color: transparent !important;
                  }
                }
                .el-slider-btn{
                  background-size: 8px 8px;
                  background-repeat: no-repeat;
                  background-color: transparent;
                  border: none;
                  background-position: center center;
                  box-shadow: none;
                  margin-top: -6px;
                  margin-left: 4px;
                  z-index: 10;
                  
                  transition: none;
                  &::after{
                    opacity: 0;
                    transition: none;
                  }
                }
                .el-slider__button-wrapper{
                  width: 30px;
                  height: 20px;
                  margin-top: 2px;
                  .el-slider__button{
                    background-image: url("../icons/icon-startIndex.png");
                    border: none;
                    background-color: transparent;
                    width: 8px;
                    height: 8px;
                    background-size: 8px 8px;
                    margin-left: 5px;
                  }
                }
                .el-slider__button.dragging, .el-slider__button.hover, .el-slider__button:hover{
                  transform: scale(1);
                }
                .el-slider__button-wrapper:nth-child(3){
                  .el-slider__button{
                    background-image: url("../icons/icon-endIndex.png");
                  }
                }
              }
            }
          }
          .single-frame {
            position: absolute;
            width: 8px;
            height: 8px;
            background-size: cover;
            background-repeat: no-repeat;
            margin-top: 4px;
            margin-left: -4px;
            background-image: url("../icons/icon-singleIndex.png");
          }
        }
      }
    }

    .video-frame {
      width: 100%;
      height: 12px;
      padding: 0 20px 0 56px;
      background-color: #182a36;
      border-bottom: 1px solid #000;
      position: relative;
      .video-frame-icon {
        width: 78px;
        height: 6px;
        left: 0;
        top: 3px;
        background: #414e60;
        border-radius: 100px;
        cursor: pointer;
      }
    }
  }
}
</style>
